<template>
  <div class="map_box">
    <div id="map" class="chart_box"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: 'TownMap',
  props: { 
    townName: String
  },
  data() {
    return {
      mapData: null,
      options: {
        //backgroundColor: '#0F1C3C',
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.value.length > 1) {
              return params.data.name + "" + params.data.value[2];
            } else {
              return params.name;
            }
          },
        },
        geo: {
          map: "townmap",
          show: true,
          roam: false,
          label: {
          },
          layoutSize: "80%",
          itemStyle: {
            areaColor: '#eee',
            shadowOffsetX: 9,
            shadowOffsetY: 9,
            shadowColor: "#eee",
            shadowBlur: 20,
          },
        },
        series: [
          {
            type: "map",
            map: "townmap",
            // aspectScale: 0.75,  //长宽比
            label: {
              //调整数值
              position: "right",
              show: true,
              color: "#fff",
              fontSize: 14,
            },
            
            itemStyle: {
              areaColor: 'rgb(86, 162, 227)',
              // 地图块颜色
              // areaColor: {
              //   x: 0,
              //   y: 0,
              //   x2: 0,
              //   y2: 1,
              //   colorStops: [
              //     {
              //       offset: 0,
              //       // color: "#073684", // 0% 处的颜色
              //       color: '#e4cfbb'
              //     },
              //     {
              //       offset: 1,
              //       // color: "#061E3D", // 100% 处的颜色
              //       color: '#e4cfbb'
              //     },
              //   ],
              // },
              borderColor: "#fff",
              borderWidth: 1,
              //鼠标放置颜色加深
              emphasis: {
                areaColor: '#eee',
                borderColor: '#888',
                borderWidth: 2,
                shadowBlur: 10,
                shadowColor: '#888',
              },
            },
            label: {
              show: true,
              textStyle: {
                fontSize: 14,
                color: '#efefef',
              },
              emphasis: {
                textStyle: {
                  color: '#000',
                },
              },
            },
            data: [],
          }
        ],
      }
    }
  },
  watch: {
    townName: {
      handler(val) {

        this.initMap()
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    initMap() {
      let map = echarts.init(document.getElementById("map"));
      echarts.registerMap('townmap', this.mapData) //注册
      map.setOption(this.options)
    }
  }
}

</script>

<style>
.map_box {
  width: 100% !important;
  height: 100% !important;
}

.chart_box {
  width: 100% !important;
  height: 100% !important;
}
</style>